<html>
<head>
<title>Mixed marker example with Three.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style>
html,body {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	overflow-x: hidden;
}
.portrait canvas {
	transform-origin: 0 0;
	transform: rotate(-90deg) translateX(-100%);
}
.desktop canvas {
 	transform: scale(-1, 1);
}
</style>
</head>
<body>

<h1>Mixed marker example with Three.js</h1>
<p>On Chrome on Android, tap the screen to start playing video stream.</p>
<p>Show <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/5.png">3x3 marker id 5</a>, <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a>, <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Hiro%20pattern.pdf">Hiro pattern</a> and <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf">Kanji pattern</a> to camera to display a colorful objects on top of them. Tap the objects to spin them.

<p>&larr; <a href="index.html">Back to examples</a></p>

<script async src="../build/artoolkit.min.js"></script>
<script async src="js/third_party/three.js/three.min.js"></script>
<script async src="../js/artoolkit.three.js"></script>

<script>

window.ARThreeOnLoad = function() {

	ARController.getUserMediaThreeScene({
		maxARVideoSize: 640,
		cameraParam: 'Data/camera_para-iPhone 5 rear 640x480 1.0m.dat',
		onSuccess: function(arScene, arController, arCamera) {

			document.body.className = arController.orientation;

			arController.setPatternDetectionMode(artoolkit.AR_TEMPLATE_MATCHING_MONO_AND_MATRIX);

			var renderer = new THREE.WebGLRenderer({antialias: true});
			if (arController.orientation === 'portrait') {
				var w = (window.innerWidth / arController.videoHeight) * arController.videoWidth;
				var h = window.innerWidth;
				renderer.setSize(w, h);
				renderer.domElement.style.paddingBottom = (w-h) + 'px';
			} else {
				if (/Android|mobile|iPad|iPhone/i.test(navigator.userAgent)) {
					renderer.setSize(window.innerWidth, (window.innerWidth / arController.videoWidth) * arController.videoHeight);
				} else {
					renderer.setSize(arController.videoWidth, arController.videoHeight);
					document.body.className += ' desktop';
				}
			}

			document.body.insertBefore(renderer.domElement, document.body.firstChild);

			var rotationV = 0;
			var rotationTarget = 0;

			renderer.domElement.addEventListener('click', function(ev) {
				ev.preventDefault();
				rotationTarget += 1;
			}, false);

			var sphere = new THREE.Mesh(
				new THREE.SphereGeometry(1.0, 8, 8),
				new THREE.MeshNormalMaterial()
			);
			sphere.material.flatShading;
			sphere.position.z = 1.0;

			var torus = new THREE.Mesh(
				new THREE.TorusGeometry(0.3*2.5, 0.2*2.0, 8, 8),
				new THREE.MeshNormalMaterial()
			);
			torus.material.flatShading;
			torus.position.z = 1.25;
			torus.rotation.x = Math.PI/2;

			var cube = new THREE.Mesh(
				new THREE.BoxGeometry(1,1,1),
				new THREE.MeshNormalMaterial()
			);
			cube.material.flatShading;
			cube.position.z = 0.5;

			var icosahedron = new THREE.Mesh(
				new THREE.IcosahedronGeometry(0.7, 1, 1),
				new THREE.MeshNormalMaterial()
			);
			icosahedron.material.flatShading;
			icosahedron.position.z = 0.7;

			var markerRoot = arController.createThreeBarcodeMarker(5, 1);
			markerRoot.add(cube);
			arScene.scene.add(markerRoot);

			var markerRoot = arController.createThreeBarcodeMarker(20, 1);
			markerRoot.add(icosahedron);
			arScene.scene.add(markerRoot);

			arController.loadMarker('Data/patt.hiro', function(markerId) {
				var markerRoot = arController.createThreeMarker(markerId, 3);
				markerRoot.add(sphere);
				arScene.scene.add(markerRoot);
			});

			arController.loadMarker('Data/patt.kanji', function(markerId) {
				var markerRoot = arController.createThreeMarker(markerId, 3);
				markerRoot.add(torus);
				arScene.scene.add(markerRoot);
			});

			var tick = function() {
				arScene.process();

				rotationV += (rotationTarget - sphere.rotation.z) * 0.05;
				sphere.rotation.z += rotationV;
				torus.rotation.y += rotationV;
				cube.rotation.z += rotationV;
				icosahedron.rotation.z += rotationV;
				rotationV *= 0.8;

				arScene.renderOn(renderer);
				requestAnimationFrame(tick);
			};

			tick();

		}
	});

	delete window.ARThreeOnLoad;

};

if (window.ARController && ARController.getUserMediaThreeScene) {
	ARThreeOnLoad();
}
</script>

</body>
</html>
